import React from 'react'
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import { Upload, Icon, message, Button, Modal} from 'antd';
import UploadImg from '../../components/Upload/index'
import styles from './index.less'
import Success from '../Result/Success';


@connect(({ banner, loading }) => ({
  banner,
  loading: loading.models.banner,
}))

class AdManage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      fileList:[]
    }
  }

  handleChange = ({ fileList }) =>{
    console.log('fileList555',fileList)
    this.setState({ fileList })
  }



  onConfirm = () => {
    const { fileList } = this.state
    console.log('fileList11111',fileList)
    const newFileList = fileList.length > 0 && fileList.filter(item=>{
      if(item.hasOwnProperty("status")){
        return item
      }
    })

    const newUrl = newFileList && newFileList.length > 0 && newFileList.map(item =>{
      return item.response.result
    })
    console.log('newFileList',newUrl)
    Modal.confirm({
      title: '确定要更新图片?',
      okText: '确定',
      cancelText: '取消',
      onOk:()=> {
        this.props.dispatch({
          type:"banner/addBannerImg",
          payload:newUrl
        })
      },
    });

  }


  onRemove = (file) => {
    this.props.dispatch({
      type:"banner/deleteBannerImg",
      payload:{
        bannerImgId:file.uid
      }
    })
    // this.setState({fileList:file})
  }

  render() {
    const { fileImg  } = this.props.banner
    const { fileList } = this.state
    const newImgs = fileImg && fileImg.map(item => {
       return {
        uid:item.id,
        url:item.bannerUrl
       }
    })

    //  let showImgs = newImgs.concat(fileList)

    //  console.log('newImgs',newImgs)

    return (
      <div className={styles.AdManage}>
        <div className={styles.banner}>
          <h3>首页banner展示图片：<span>(请上传750*440px大小图片)</span></h3>
          <div className={styles.upload}>
            <UploadImg
               onRemove={this.onRemove}
               handleChange={this.handleChange}
               newImgs={newImgs}
               fileList={fileList}
            />
          </div>
          <div style={{ textAlign: 'right',paddingRight: '15px'  }}>
            <Button type="primary" disabled={newImgs && newImgs.length == 4 } onClick={this.onConfirm}>确定</Button>
          </div>
        </div>
      </div>
    );
  }
};

export default AdManage
